<template>
  <div>
    <el-card>
      <el-row>
        <el-col :span="24" class="basic">
          <span class="traing"></span>身体机能数据采集(本周情况)
          <span class="traing"></span>
        </el-col>
        <div class="circlecenter">
          <el-col :span="6">
            <div class="circle1">
              <el-progress
                type="circle"
                :percentage="35"
                :stroke-width="20"
                :width="180"
                :show-text="false"
              ></el-progress>
              <div class="detailed">
                <div class="detailnumber">{{bodylist1.hb}}g/l</div>
                <div>血红蛋白(HB)</div>
                <div class="detailweek">
                  教上周
                  <div class="el-icon-top">{{this.totalbodylist.ck}}</div>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="circle2">
              <el-progress
                type="circle"
                :percentage="35"
                :stroke-width="20"
                :width="180"
                :show-text="false"
              ></el-progress>
              <div class="detailed">
                <div class="detailnumber">{{bodylist1.bu}}mmol/l</div>
                <div>血尿素氨(BU)</div>
                <div class="detailweek">
                  教上周
                  <div class="el-icon-top">{{this.totalbodylist.bu}}</div>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="circle3">
              <el-progress
                type="circle"
                :percentage="35"
                :stroke-width="20"
                :width="180"
                :show-text="false"
              ></el-progress>
              <div class="detailed">
                <div class="detailnumber">{{bodylist1.ck}}u/l</div>
                <div>肌酸激酶(CK)</div>
                <div class="detailweek">
                  教上周
                  <div class="el-icon-top">{{this.totalbodylist.ck}}</div>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="circle4">
              <el-progress
                type="circle"
                :percentage="35"
                :stroke-width="20"
                :width="180"
                :show-text="false"
              ></el-progress>
              <div class="detailed">
                <div class="detailnumber">111g/l</div>
                <div>血压</div>
                <div class="detailweek">
                  教上周
                  <div class="el-icon-top"></div>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="circle5">
              <el-progress
                type="circle"
                :percentage="35"
                :stroke-width="20"
                :width="180"
                :show-text="false"
              ></el-progress>
              <div class="detailed">
                <div class="detailnumber">111g/l</div>
                <div>尿酸</div>
                <div class="detailweek">
                  教上周
                  <div class="el-icon-top"></div>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="circle6">
              <el-progress
                type="circle"
                :percentage="35"
                :stroke-width="20"
                :width="180"
                :show-text="false"
              ></el-progress>
              <div class="detailed">
                <div class="detailnumber">111g/l</div>
                <div>心率</div>
                <div class="detailweek">
                  教上周
                  <div class="el-icon-top"></div>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="circle7">
              <el-progress
                type="circle"
                :percentage="35"
                :stroke-width="20"
                :width="180"
                :show-text="false"
              ></el-progress>
              <div class="detailed">
                <div class="detailnumber">111g/l</div>
                <div>血清睾酮(T)</div>
                <div class="detailweek">
                  教上周
                  <div class="el-icon-top"></div>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="circle8">
              <el-progress
                type="circle"
                :percentage="35"
                :stroke-width="20"
                :width="180"
                :show-text="false"
              ></el-progress>
              <div class="detailed">
                <div class="detailnumber">111g/l</div>
                <div>血乳酸</div>
                <div class="detailweek">
                  教上周
                  <div class="el-icon-top"></div>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="circle9">
              <el-progress
                type="circle"
                :percentage="35"
                :stroke-width="20"
                :width="180"
                :show-text="false"
              ></el-progress>
              <div class="detailed">
                <div class="detailnumber">111g/l</div>
                <div>体重(kg)</div>
                <div class="detailweek">
                  教上周
                <div class="el-icon-top"></div>
                </div>
              </div>
            </div>
          </el-col>
        </div>
      </el-row>
    </el-card>
    <el-card class="formbasic">
      <el-row>
        <el-col :span="12" class="basic">
          <span class="traing"></span>数据图显示情况
          <span class="traing"></span>
        </el-col>
        <el-col :span="12">
          <el-form :model="queryParams" ref="queryForm" :inline="true">
            <el-form-item label=" " prop>
              <el-select
                v-model="form.trainingProject"
                placeholder="血红蛋白"
                clearable
                size="small"
                style="width: 160px"
              >
                <el-option
                  v-for="dict in statusOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                />
              </el-select>
            </el-form-item>
            <el-date-picker
              v-model="injuryTimers"
              type="daterange"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始月份"
              end-placeholder="结束月份"
            ></el-date-picker>
          </el-form>
        </el-col>
        <el-row>
          <el-col :span="24">
            <div class="nowtarget" id="bodyshang"></div>
          </el-col>
        </el-row>
      </el-row>
    </el-card>
    <el-card class="formbasic">
       <el-row>
         <el-col :span="12" class="basic">
          <span class="traing"></span>身体机能数据采集<span class="hostory">(历史情况)</span>
          <span class="traing"></span>
        </el-col>
       </el-row>
    </el-card>
  </div>
</template>
<script>

import { enginery } from "@/api/monitor/logininfor";
export default {
  
  props: ["activeName"],
  data() {
    return {
      form: {
        trainingProject: "",
      },
      injuryTimers: "",
      statusOptions: [],
      queryParams: {},
      bodylist:[],
      bodylist1:{},
      bodylist2:{},
      totalbodylist:{},
    };
  },
  created() {
    this.besttrbody();
  },
  watch: {
    activeName: function () {
      if (this.activeName == 3) {
        this.waterbest();
      }
    },
  },
  mounted() {
    if (this.activeName == 3) {
      this.waterbest();
    }
  },
  methods: {
    besttrbody() {
      enginery({
        sportsManId: this.$route.query.id,
      })
        .then((res) => {
          console.log(res,33333333)
          this.bodylist=res.data;
          this.bodylist1=this.bodylist[0];
          this.bodylist2=this.bodylist[1];
          this.totalbodylist.hb=this.bodylist1.hb-this.bodylist2.hb;
          this.totalbodylist.bu=this.bodylist1.bu-this.bodylist2.bu;
          this.totalbodylist.ck=this.bodylist1.ck-this.bodylist2.ck;
          

        })
        .catch((res) => {});
    },
    waterbest() {
      var myChart = this.$echarts.init(document.getElementById("bodyshang"));
      myChart.setOption({
        title: {
          text: "公里", //标题
          left: "10px",
          top: "5px",
          textStyle: {
            color: "#666",
          },
        },
        legend: {
          data: ["预购队列", "在场人数"], //顶部色块
          x: "center",
          top: "5px",
        },
        tooltip: {
          trigger: "item",
          formatter: " <br/>{c}",
        },
        xAxis: {
          boundaryGap: false,
          data: ["1月", "2月", "3月", "4月", "5月", "6月"],
        },
        yAxis: {},
        series: [
          {
            name: "预购队列",
            type: "line",
            smooth: true,
            data: [5, 20, 36, 10, 10, 20],
          },
          {
            name: "在场人数",
            type: "line",
            smooth: true,
            data: [1, 12, 30, 15, 5, 15],
          },
        ],
        grid: {
          top: "50",
          left: "40",
          right: "20",
          bottom: "25",
        },
        color: ["#F56C6C", "#409eff"], //设置颜色，也可以在对应的数据里面设置（itemStyle属性中）
      });
    },
  },
};
</script>
<style scoped>
.basic {
  margin-bottom: 40px;
  text-align: left;
}
.traing {
  display: inline-block;
  width: 14px;
  height: 8px;
  background-color: #2583ff;
  margin-right: 7px;
  margin-left: 7px;
}
.circlecenter {
  text-align: center;
}
.nowtarget {
  text-align: center;
  margin-top: 50px;
}
#bodyshang {
  height: 300px;
  width: 100%;
}
.formbasic {
  margin-top: 20px;
}
.circle1,
.circle2,
.circle3,
.circle4,
.circle5,
.circle6,
.circle7,
.circle8,.circle9 {
  position: relative;
}
.detailed {
  position: absolute;
  top:44%;
left: 50%;
transform: translate(-50% ,-50%);
  font-size: 14px;
}
.detailed div {
  text-align: center;
  line-height: 27px;
}
.detailed .detailnumber{
  color:rgba(38, 132, 255, 1);
}
.detailed .detailweek{
  color:rgba(120, 120, 120, 1);
}
.el-icon-top {
  color: red;
}
.hostory{
  margin-left:10px;
  font-size: 12px;
  color:rgba(120, 120, 120, 1);
}
</style>